<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Multi Lines</title>
    <link rel="stylesheet" href="../css/style.css">
    <script type="text/javascript" src="../../dist/paper-full.js"></script>
    <script type="text/paperscript" canvas="canvas">
        tool.fixedDistance = 30;

        var values = {
            lines: 5,
            size: 40,
            smooth: true
        };

        var paths;

        function onMouseDown(event) {
            paths = [];
            for (var i = 0; i < values.lines; i++) {
                var path = new Path();
                path.strokeColor = '#000000';
                paths.push(path);
            }
        }

        function onMouseDrag(event) {
            var offset = event.delta;
            offset.angle = offset.angle + 90;
            var lineSize = values.size / values.lines;
            for (var i = 0; i < values.lines; i++) {
                var path = paths[values.lines - 1 - i];
                offset.length = lineSize * i + lineSize / 2;
                path.add(event.middlePoint + offset);
                path.smooth();
            }
        }
    </script>
</head>
<body>
    <canvas id="canvas" resize></canvas>
</body>
</html>
